<template>
  <div class="movieListRoot">
    <FontHeader style="background: #192332; position: relative;"></FontHeader>
    <div class="todayhot">
      <div class="mask"></div>
      <div class="container">
        <div class="hotnews" style="display: block">
          <ul class="newslist">
            <li class="newsitem" v-for="item in movies" :key="item.movieId">
              <div class="cinameimgout showMovieBrief">
                <router-link :to="{path:'/detail',query:{movieId:item.movieId}}">
                  <a href="#" target="_blank" :title="item.movieName" class="cinameimgitem">
                    <!--                    本地运行改为http://localhost:8081/posters/-->
                    <img :src="'http://43.138.158.143/posters/'+item.movieId+'.jpg'" :alt="item.movieName">
                    <em class="icohot">HOT</em>
                    <i class="moviegrade" style="color: white">{{item.rating}}</i>
                  </a>
                </router-link>
              </div>
              <div class="movieName">
                <h3>
                  <a>{{item.movieName}}</a>
                </h3>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="margin: 0 auto;width: 600px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import FontHeader from "@/components/FontHeader";
import 'swiper/css/swiper.min.css'
export default {
  components: {FontHeader},
  name: "AllMovies",
  data(){
    return{
      page: 1,
      pageSize: 20,
      pageNum: 1,
      searchType: 0,
      info: "",
      total: 0,
      movies:{},
    }
  },
  created() {
    this.search(this.page,this.pageSize)
  },
  methods:{
    search(page,pageSize){
      this.request.get('/movie/visitor/searchMovieByAny',{
        params:{
          page: page,
          pageSize: pageSize,
          searchType: this.searchType,
          info: this.info
        }
      }).then(res=>{
        if(res.code == 0){
          this.movies = res.data.movieList
          this.total = res.data.movieNum
        }else{
          this.$message.error(res.message)
        }
      })
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.search(this.page,pageSize)

    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      this.search(pageNum,this.pageSize)
    },
  }
}
</script>

<style scoped>

</style>